<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
    	<title>hello-backbonejs</title>
		<script type="text/javascript" src="jquery-2.1.1.js"></script>
		<script type="text/javascript" src="underscore.js"></script>
		<script type="text/javascript" src="backbone.js"></script>
	</head>

	<body>
		<div id="certificate"></div>

		<script type="text/template" id="tpl-certificate">
			<h1><%= name %></h1>
			<p>DOB: <%= dob %></p>
		</script>
			
		<script type="text/javascript">
			CertificateView = Backbone.View.extend({
				template:_.template($("#tpl-certificate").html()),

				initialize: function() {
					this.render();
				},

				render: function() {
					var templateArgs = {
						name: "Joseph Do",
						dob: "28th Aug 1990"
					};
					$(this.el).html(this.template(templateArgs));
				}
			});

			CustomRouter = Backbone.Router.extend({
				routes: {
					"/certificates/:id": "getCertificate",
				},

				getCertificate: function(id) {
					new CertificateView({el: $("#certificate")});
				}

			});

			var customRouter = new CustomRouter();

			Backbone.history.start();
		</script>
	</body>
</html>